import { StyleSheet } from 'react-native'
import px from '@/libs/px'

export default StyleSheet.create({
  wrap: {
    flex: 1,
    position: 'absolute',
    zIndex: 100,
    width: '100%',
    height: '100%',
  },
  mask: {
    flex: 1,
    position: 'absolute',
    zIndex: 100,
    left: 0,
    top: 0,
    width: '100%',
    height: '100%',
    backgroundColor: 'rgba(0, 0, 0, 0.5)'
  },
  popMain: {
    width: px(560),
    position: 'absolute',
    zIndex: 120,
    left: '50%',
    top: '50%',
    backgroundColor: '#fff',
    borderRadius: px(20),
    transform: [{
      translateX: px(-280)
    }, {
      translateY: px(-340)
    }]
  },
  container: {
    flex: 1,
    minHeight: px(500),
    maxHeight: px(600)
  }, 
  popTitle: {
    textAlign: 'center',
    paddingTop: px(40),
    justifyContent: 'center',
    alignItems: 'center'
  },
  titleText: {
    fontSize: 20
  },
  popBody: {
    flex: 1,
    padding: px(40)
  },
  bodyText: {
    fontSize: 16,
    lineHeight: 24,
    marginTop: px(20)
  },
  popFooter: {
    flex: 1,
    flexDirection: 'row',
    borderTopWidth: px(1),
    borderTopColor: '#ccc'
  },
  popBtn: {
    flex: 1,
    height: px(100),
    textAlign: 'center',
    justifyContent: 'center',
    alignItems: 'center'
  },
  btnWrap: {
    flex: 1
  },
  cancelText: {
    color: '#ccc',
    fontSize: 16
  },
  submitText: {
    color: '#D2363A',
    fontSize: 16
  },
  linkText: {
    color: '#1f78d1',
    fontSize: 16
  }
})